<template>
    <div class="body-container">
        <div class="image-detect-container">
            <div class="image-detect-result">
                <div class="image-canvas-container">
                    <canvas width="670" height="419" class="image-canvas" ref="imageCanvas"></canvas>
                </div>
                <div class="image-input-container">
                    <input type="text" placeholder="请输入网络图片URL" class="image-url" v-model="imageURL"/>
                    <button class="image-button" @click="handleImageURL"
                            :class="{'image-active-button': this.imageURL.length !== 0}">检测</button>
                    <div class="image-text">或</div>
                    <label class="image-local">
                        <input type="file" accept="image/png, image/bmp, image/jpg, image/jpeg"
                               style="display: none;" @change="handleImageFile" ref="fileButton"/>
                        本地上传
                    </label>
                </div>
            </div>
            <div class="image-gallery">
                <a-row justify="space-around" class="image-list">
                    <a-col :span="4" class="image-item" v-for="(value, index) in imageGalleryList"
                           :key="index">
                        <img :src="value" alt="" @click="handleCurrentImage(index)"
                             :class="{ 'image-active-item': index===this.activeIndex }">
                    </a-col>
                </a-row>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref, reactive, onMounted, inject} from 'vue';
    import imgUrl from '../static/images/multi_small_face.jpeg';
    
    export default defineComponent({
        setup() {
            const imageCanvas = ref<any>(null);  // 放置待检测图片的画布元素
            const fileButton = ref<any>(null);  // 上传图片按钮元素，用来获取上传的图片
            const imageGalleryList = reactive<string[]>([
                "./images/demo_pic1.png",
                "./images/demo_pic2.png",
                "./images/demo_pic3.png",
                "./images/demo_pic4.png"
            ])  // 候选供检测的图片列表
            const faceDetectCanvas: any = inject('$faceDetectCanvas');  // 全局变量中实例化的检测图片的类
           
            let activeIndex = ref<number>(-1);  // 当前选中的候选图片索引
            let imageURL = ref<string>('');  // 待检测的图片URL
            
            /**
             * 检测候选图片列表中选中的图片
             * @param index: 选中的图片的索引
             */
            function handleCurrentImage(index: number) {
                activeIndex.value = index;
                faceDetectCanvas.startDetectImage(imageCanvas.value, imageGalleryList[index]);
            }
    
            /**
             * 检测输入框中输入的图片URL的图片
             */
            function handleImageURL() {
                const imgURL: string = imageURL.value;
                faceDetectCanvas.startDetectImage(imageCanvas.value, imgURL);
                imageURL.value = '';
            }
    
            /**
             * 检测用户上传的图片
             */
            function handleImageFile() {
                const imgURL: string = window.URL.createObjectURL(fileButton.value.files[0]);
                faceDetectCanvas.startDetectImage(imageCanvas.value, imgURL);
            }
            
            onMounted(async () => {
                await faceDetectCanvas.faceDetector.init();
                await faceDetectCanvas.startDetectImage(imageCanvas.value, imgUrl);  // 页面加载时检测一张默认图片
            })
            
            return {
                activeIndex,
                fileButton,
                imageGalleryList,
                imageCanvas,
                imageURL,
                handleCurrentImage,
                handleImageURL,
                handleImageFile
            };
        },
    });
</script>
<style>
    .body-container {
        height: 100%;
        width: 100%;
        background-color: #fff;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .body-container .image-detect-container {
        height: 5.24rem;
        width: 6.72rem;
        background-color: #ebebeb;
        
        display: flex;
        flex-direction: column;
    }

    .body-container .image-detect-container  .image-detect-result {
        width: 100%;
        height: 80%;
        background-color: #343434;
    
        position: relative;
    }
    
    .image-detect-result .image-canvas-container .image-canvas {
        width: 100%;
        height: auto;
        border:1px solid #f2180d;
    }
    
    .image-detect-result .image-input-container {
        width: 100%;
        height: 0.6rem;
        background-color: rgba(0, 0, 0, .5);
        padding: 0 0.1rem;
        
        font-size: 0.16rem;
        color: #ccc;
        
        position: absolute;
        bottom: 0;
        left: 0;
        
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .image-detect-result .image-input-container .image-url {
        height: 0.38rem;
        border: 1px solid #666;
        border-right: 0;
        background-color: rgba(0, 0, 0, .45);
        
        text-indent: 0.11rem;
        outline: none;
        
        flex: 1;
    }
    
    .image-detect-result .image-input-container .image-button {
        height: 0.38rem;
        border: 1px solid #666;
        background-color: rgba(0, 0, 0, .45);
        cursor: pointer;
        
        flex: 0.18;
    }
    
    .image-detect-result .image-input-container .image-active-button {
        background-color: #0073eb;
        border-color: #0073eb;
        color: #fff;
    }
    
    .image-detect-result .image-input-container .image-text {
        flex: 0.14;
        display: flex;
        justify-content: center;
        cursor: default;
    }
    
    .image-detect-result .image-input-container .image-local {
        height: 0.38rem;
        background-color: #0073eb;
        cursor: pointer;
        
        color: #fff;
    
        flex: 0.24;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .body-container .image-gallery {
        width: 100%;
        height: 20%;
    }
    
    .body-container .image-gallery .image-list {
        width: 100%;
        height: 100%;
    }
    
    .image-gallery .image-list .image-item {
        max-width: 22%;
        
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .image-gallery .image-list .image-active-item {
        border: 2px solid #0073eb;
    }
    
    .image-list .image-item img {
        width: 1.5rem;
        height: auto;
    }
</style>